<template>
    <section>
        <div class="assets-container">
            <div class="header flex-box">
                <h4>资产概况</h4>
            </div>
            <div class="assets-con flex-box flex-box-display">
                <div class="flex-box">
                    <img :src="list.image ? list.image : 'http://infyom.com/images/logo/blue_logo_150x150.jpg'" alt="头像" class="img-circle assets-con__img" />
                    <div style="line-height:104px;">{{list.name ? list.name : '暂无数据'}}</div>
                </div>
                <div class="assets-con flex-box" style="width: 422px">
                    <div style="padding-right: 29px">
                        <span>可用余额</span>
                        <span class="f22 assets-warning">¥</span>
                        <span class="assets-warning">{{list.balance ? list.balance : '暂无数据'}}</span>
                    </div>
                    <el-button type="primary" @click="pay">充值</el-button>
                    <el-button type="primary" @click="withdraw">提现</el-button>
                </div>
            </div>
            <div class="assets-con">
                <div class="assets-con__title">
                    <span>收益概况</span>
                </div>
                <div class="flex-box flex-box-around">
                    <div class="assets-box" v-for="profile in profilesList">
                        <span>{{profile.title}}</span>
                        <span class="f22">¥</span>
                        <span class="f32">{{profile.value ? profile.value : '暂无数据'}}</span>
                    </div>
                </div>
            </div>
            <div class="flex-box flex-box-around" style="padding-left: 10px">
                <div class="assets-con" style="margin:0 10px 0 0" v-for="book in bookList">
                    <div class="assets-con__title">
                        <span>{{book.title}}</span>
                    </div>
                    <div class="flex-box flex-box-display">
                        <div class="assets-box">
                            <span>{{book.subTitle}}</span>
                            <span class="f22">¥</span>
                            <span class="f32">{{book.value ? book.value : '暂无数据'}}</span>
                        </div>
                        <div class="assets-box">
                            <a :href="'/admin/orderBook?activeTab='+book.address" class="btn jump-btn">
                             查看明细
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="assets-con">
                <div class="assets-con__title flex-box flex-box-display">
                    <span>提现记录</span>
                    <a href="/admin/categoryStatistics" class="btn jump-btn">
                        提现记录
                    </a>
                </div>
                <div class="flex-box flex-box-around">
                    <div class="assets-box" v-for="withdrawal in withdrawalList">
                        <span>{{withdrawal.title}}</span>
                        <span class="f22">¥</span>
                        <span class="f32">{{withdrawal.value ? withdrawal.value : '暂无数据'}}</span>
                    </div>
                </div>
            </div>
        </div>

        <pay-dialog :show.sync="dialogVisible"></pay-dialog>
    </section>
</template>

<script>
    import FlowRow from '../../components/basic/FlowRow'
    import PayDialog from './Pay'
    import WithdrawDialog from './Withdraw'

    export default {
        components: {
            FlowRow,
            PayDialog,
            WithdrawDialog
        },
        data() {
            return {
                list: '',

                profilesList:[{
                    title:'近7日收益',value:''
                },{
                    title:'近30日收益',value:''
                },{
                    title:'累计收益',value:''
                }],

                bookList:[{
                    title:'待入账',subTitle:'待入账余额',value:'',address:'stay'
                },{
                    title:'已入账',subTitle:'近7日收益',value:'',address:'end'
                }],

                withdrawalList:[{
                    title:'申请提现中',value:''
                },{
                    title:'提现中',value:''
                },{
                    title:'累计提现成功',value:''
                }],

                dialogVisible: false
            }
        },
        computed: {},
        mounted() {
            this.getConfigsData();
        },
        methods: {
            getConfigsData() {
                axios
                    .get('admin_configs')
                    .then(res => res.data.data)
                    .then(data => {
                        console.log('数据', data);
                        this.list = data;
                    })
            },
            dialogShow() {
                this.dialogVisible = !this.dialogVisible;
            },
            pay() {
                console.log('充值');
                this.dialogShow()
            },
            withdraw() {
                console.log('提现')
            }
        }
    }

</script>

<style scoped>
    .assets-container {
        min-height: calc(100vh - 92px);
    }

    .assets-warning {
        font-size: 32px;
        color: #FA863D;
    }

    .flex-box {
        display: flex;
    }

    .flex-box-around {
        justify-content: space-around;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;
        background: #fff;
    }

    .assets-con {
        width: 100%;
        height: auto;
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .assets-con__title {
        font-size: 14px;
        font-weight: bolder;

        padding-bottom: 10px;
        border-bottom: 1px dashed #D8D8D8;
    }

    .assets-box {
        font-size: 12px;
        color: #666666;
        padding: 36px 30px;
    }

    .f22 {
        font-size: 22px !important;

        padding-left: 10px;
    }

    .f32 {
        font-size: 32px !important;
        color: #000000 !important;
    }

    .assets-con__img {
        width: 96px;
        height: 96px;
        padding-right: 20px;
    }

    .assets-con__img img {
        width: 56px;
        height: 56px;
    }

    .assets-con__info p {
        font-weight: bolder;
    }

    .assets-con__info span {
        font-size: 12px;
        color: #999;
    }

    .dialog-con__img img {
        width: 160px;
        height: 160px;
        margin: 20px 50px;
    }
    .jump-btn{
        width: 100px;
        height: 32px;
        color:#546481;
        background: #D3DBE9;
    }
</style>
<style>
    .el-dialog__header {
        padding: 11px 20px 11px 20px;
        background: #3F7DFF;
        text-align: center
    }

    .el-dialog__title {
        color: #FFFFFF;
    }

    .el-dialog__headerbtn .el-dialog__close {
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background: #FFFFFF;
        color: #3F7DFF;
        font-weight: bolder;
    }

    .el-dialog__headerbtn {
        top: 10px;
    }

</style>